<template>
  <div class="home">
    <div class="title-box">
      <el-tabs v-model="activeName" class="home-tabs" @tab-click="handleClick" type="border-card">
        <el-tab-pane v-for="item in dataAll" :label="item.name" :name="item.name" :key="item.id"></el-tab-pane>
      </el-tabs>
    </div>
    <div class="card-box">
      <div v-for="item in dataCurren" :key="item" class="item" @click="clickItem(item)">
        <div class="left"><img :src="item.icon" alt="" /></div>
        <div class="right">
          <div class="name">{{ item.name }}</div>
          <div class="desc">{{ item.depict }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, computed, ref, reactive } from 'vue'
import { getCardApi } from '@/api/mgmtCard' //api/后面不能大写Mgmt
import { listToTree } from '@/utils/index.js'

const activeName = ref('')
const dataAll = ref([])
const dataCurren = ref([])
const initData = async () => {
  const res = await getCardApi()
  if (res.code === 200) {
    let aa = listToTree(res.data.reverse())
    console.log(aa)
    dataAll.value = aa
    activeName.value = dataAll.value[0].name
    dataCurren.value = dataAll.value[0].children
  }
}
//点击页签切换
const handleClick = (tab, event) => {
  let res = dataAll.value.filter((el) => {
    if (tab.props.label == el.name) {
      return el
    }
  })
  let a = JSON.parse(JSON.stringify(res))
  dataCurren.value = a[0].children
}
const clickItem = (item) => {
  window.open(item.url)
}

const toTree = (data, topId, idKey, topIdKey) => {
  let nodes = []
  topId = topId || 0
  idKey = idKey || 'id'
  topIdKey = topIdKey || 'topId'
  data.forEach(function (item) {
    if (item[topIdKey] === topId) {
      let node = item
      node.children = listToTree(data, item[idKey], idKey, topIdKey)
      if (node.children.length === 0) {
        delete node.children
      }
      nodes.push(node)
    }
  })
  return nodes
}
onMounted(() => {
  initData()
})
</script>
<style scoped lang="scss">
.home {
  .title-box {
    width: 100%;
    display: flex;
    .tag {
      margin: 10px;
    }
    .home-tabs {
      width: 100%;
    }
  }
  .card-box {
    display: flex;
    flex-wrap: wrap;
    .item {
      display: flex;
      padding: 30px 20px;
      border: 1px solid #ddd;
      margin: 20px;
      width: 30%;
      cursor: pointer;
      background: '#fff';
      border-radius: 8px;
      transition: background 1s;
      &:hover {
        background: rgba(0, 0, 0, 0.1);
      }
      .left {
        width: 80px;
        height: 80px;
        img {
          width: 100%;
        }
      }
      .right {
        margin-left: 10px;
        .name {
          margin-top: 10px;
          font-weight: 700;
        }
        .desc {
          margin-top: 15px;
        }
      }
    }
  }
}
.home ::v-deep(.el-tabs__content) {
  display: none;
}
.myform {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  ::v-deep(.el-select) {
    width: 100%;
  }
}
</style>
